<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景</title>

        <style>
            #app {
                width: 1000px;
                height: 600px;

                /* 文字颜色 */
                color: white;

                /* 背景颜色 */
                background-color: rgb(41,89,117);
                border-radius: 4px;

                /* 背景图片：会叠加在背景图片上方，默认情况下，图片没有完整覆盖整个盒子，会进行重复的平铺 */
                background-image: url("https://game.gtimg.cn/images/lol/act/img/skin/big30003.jpg");
                background-repeat: no-repeat;

                /* 图片位置 水平（left/right/center） 垂直（top/botton/center） */
                /* 如果只设置一个方向上的对齐，另一方向默认是居中 
                   left ===> left center;
                   right ===> right center;
                   center ===> center center;

                   top ===> center top;
                   bottom ===> center botton;

                   位置属性值除了是关键字之外，还可以是数值
                */
                /* background-position: 50px 50px;*/

                /* 图片大小
                   数值的情况下 一个值表示宽度，相对高度会保持一个图片的纵横比进行缩放
                               两个值表示 宽度 高度
                   关键字的情况 cover 覆盖 contain 包含
                */
                background-size: cover;
            }

            [type="button"] {
                background-color: rgb(100,149,237);
                border: 1px solid rgb(100,149,237);
                border-radius: 4px;
                color: aliceblue;

                padding: 5px 10px;
            }

            [type="button"]:hover {
                background-color: crimson;
                border-color: crimson;
            }
        </style>
    </head>
    <body>
        <input type="button" value="按钮">

        <hr>

        <div id="app">
            这是一个容器
        </div>
    </body>
</html>